<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            var user = getUser();
            $(".info").renderValues(user);

            $("#saveBtn").click(function () {
                $("#infoForm").ajaxSubmit({
                    url: "/users/" + user.id,
                    success: function (data) {
                        data.obj.email = user.email;
                        setUser(data.obj);
                        location.href = "profiles.html";
                    }
                });

            })
            var type = 0;//o代表上传的是头像,1是背景
            $("#headImg,#coverBtn").click(function () {
                type = $(this).data("type");
                $("[name=pic]").click();
            })
            $("[name=pic]").change(function () {
                if (this.value) {
                    $("#imgForm").ajaxSubmit(function (data) {
                        if (type == 0) {
                            //设置头像回显
                            $("#headImg").attr("src", data.url);
                            $("[name=headImgUrl]").val(data.url);
                        } else {
                            //设置背景回显
                            $(".myBg").css("background-image", "url(" + data.url + ")");
                            $("[name=coverImgUrl]").val(data.url);

                        }
                    })
                }
            })
            $(".myBg").css("background-image", "url(" + user.coverImgUrl + ")");

        });
    </script>
</head>

<body>
<form id="imgForm" action="/images" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" style="display: none;" accept="image/*"/>
</form>

<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.back();">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
            <span>设置个人资料</span>
        </div>
        <div class="col">
            <a href="javascript:" id="saveBtn">
                <span>保存</span>
            </a>
        </div>
    </div>
</div>

<div class="container info">
    <div class="myBg" >
        <img id="headImg" class="rounded-circle" data-type="0" render-src="headImgUrl" />
        <div class="editHead" id="headBtn">
            <i class="fa fa-pencil-square fa-lg " aria-hidden="true"></i>
        </div>
        <button class="btn btn-outline-light ibtn " id="coverBtn" data-type="1">设置背景</button>
    </div>

    <form id="infoForm" method="post">
        <input type="hidden" name="headImgUrl" render-value="headImgUrl">
        <input type="hidden" name="coverImgUrl" render-value="coverImgUrl">
        <input type="hidden" name="_method" value="PUT">
        <label>昵称</label>
        <input type="text" name="nickName" class="form-control" render-value="nickName">
        <label>性别</label>
        <select class="form-control" name="gender" render-value="gender">
            <option value="0">女</option>
            <option value="1">男</option>
            <option value="2">保密</option>
        </select>
        <label>地区</label>
        <input type="text" name="place" class="form-control" render-value="place">
        <label>签名</label>
        <textarea name="sign" class="form-control" rows="5" render-html="sign"></textarea>
    </form>
</div>

</body>
</html>
